<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="我的收藏"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <!-- 收藏商品列表 -->
    <div class="goods" v-if="act == 'goods'">
      <div
        @click="togoodsinfo(item.id)"
        class="item"
        v-for="item in datalist"
        :key="item.id"
      >
        <img :src="item.list_pic_url" alt="" />
        <h3>{{ item.name }}</h3>
        <p>{{ item.retail_price }}</p>
      </div>
    </div>
    <div class="nodata" v-else>暂无收藏任何商品...</div>
  </div>
</template>

<script>
import {
  deleteAction,
  detailAction,
  listAction,
  saveAction,
  getListAction,
} from "@/api/my/index";
export default {
  components: {},

  data() {
    return {
      act: "goods",
      datalist: [],
    };
  },

  created() {
    listAction({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      console.log(res);
      if (res.collectGoodsList.length == 0) {
        this.act = "nodata";
      } else {
        this.cat = "goods";
      }
      this.datalist = res.collectGoodsList;
    });
  },

  mounted() {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    togoodsinfo(goodsid) {
      // console.log(goodsid);
      this.$router.push({
        name: "goodsinfo",
        params: {
          id: goodsid,
        },
      });
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.goods {
  width: 375px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
  h4 {
    font-size: 18px;
    margin: 00px auto;
    margin-top: 160px;
    color: #999;
  }
  .item {
    width: 185px;
    margin-top: 5px;
    background-color: #fff;
    img {
      width: 151px;
    }
    h3 {
      width: 165px;
      margin: 5px auto;
    }
    p {
      color: red;
      margin-bottom: 20px;
    }
  }
}
.nodata {
  width: 375px;
  height: 150px;
  line-height: 150px;

  color: rgb(255, 0, 0);
}
</style>